<template>
  <div class="nodeWrap" :class="[showAdd ? 'add' : '']">
    <div class="nodeBox">
      <div class="title">
        <span class="icon"></span>
        <a-input
          ref="inputRef"
          :autoFocus="autoFocus"
          v-if="editStatus"
          v-model:value="nodeName"
          placeholder="请输入节点名称"
          @blur="handleBlur"
        ></a-input>
        <div v-else class="showArea" @click="handleEdit">
          <span class="nodeName">{{ nodeName }}</span>
          <span class="editIcon"></span>
        </div>
      </div>
      <div class="content">
        <associate :nodeIndex="nodeIndex" :treeData="treeData" :data="data" :name="name" :id="id"></associate>
      </div>
    </div>
    <arrows class="arrowsComponent">
      <span v-if="showAdd" class="addBtn" @click="handleAdd"></span>
    </arrows>
  </div>
</template>

<script setup name="node">
  import associate from '../associate/index.vue';
  import arrows from '../arrows/index.vue';
  import { message } from 'ant-design-vue';
  import { ref, nextTick } from 'vue';
  const props = defineProps(['data', 'nodeIndex', 'showAdd', 'treeData', 'name', 'id']);
  const emit = defineEmits(['onAdd']);
  const inputRef = ref(null);
  const nodeName = ref('');
  const editStatus = ref(true);
  const autoFocus = ref(false);
  /** */
  const handleBlur = () => {
    if (nodeName.value.length) {
      props.data['nodeName'] = nodeName.value;
      editStatus.value = false;
    } else {
      if (props.data['nodeName'].length) {
        nodeName.value = props.data['nodeName'];
        editStatus.value = false;
      } else {
        props.data['nodeName'] = '';
        editStatus.value = true;
      }
    }
  };
  /** */
  const handleEdit = () => {
    autoFocus.value = true;
    editStatus.value = true;
    nextTick(() => {
      inputRef.value.focus();
    });
  };
  const handleAdd = () => {
    if (!props.data['nodeName'].length) {
      message.warning('节点名称不能为空');
      return;
    }
    if (!props.data['nodeDeviceId']) {
      message.warning('摄像头名称不能为空');
      return;
    }
    emit('onAdd');
  };
</script>

<style lang="less" scoped>
  @boxRadius: 6px;
  .nodeWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    &.add {
      .title {
        background: #86909c;
        :deep(.ant-input) {
          border-color: #a1a4a7;
          color: #fff;
          box-shadow: none;
          &::placeholder {
            color: #adb2b6;
          }
        }
      }
    }
  }
  .nodeBox {
    width: 308px;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
    border-radius: @boxRadius;
    .title {
      height: 36px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      //background: linear-gradient(173.75deg, #5b97ff 3.73%, #146aff 94.94%);
      background: #146aff;
      border-top-left-radius: @boxRadius;
      border-top-right-radius: @boxRadius;
      transition: backgroundColor 200ms ease;
      .icon {
        background-image: url(@/assets/image/nodeName.png);
        background-size: 100%;
        width: 16px;
        height: 15px;
        margin-right: 8px;
      }
      :deep(.ant-input) {
        width: 150px;
        border-color: #4591dc;
        padding: 4px;
        height: 26px;
        background-color: transparent !important;
        box-sizing: none !important;
        color: #fff;
        &::placeholder {
          color: #4591dc;
        }
      }
      .showArea {
        margin-left: 4px;
        display: flex;
        color: #fff;
        align-items: center;
        line-height: 26px;
        cursor: pointer;
        &:hover {
          .editIcon {
            display: block;
          }
        }
        .nodeName {
          max-width: 150px;
          margin-right: 10px;
        }
        .editIcon {
          display: none;
          width: 16px;
          height: 16px;
          background-image: url(@/assets/image/edit.png);
          background-size: 100%;
        }
      }
    }
    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 52px;
      background-color: #fff;
      padding: 0 10px;
      border-bottom-left-radius: @boxRadius;
      border-bottom-right-radius: @boxRadius;
    }
  }
  .arrowsComponent {
    margin-top: -4px;
  }
  .addBtn {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url(@/assets/image/addNode.png);
    background-size: 100%;
    cursor: pointer;
  }
</style>
